<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="/js/xadmin.js"></script>
		<style>
			form {
				margin-top: 10px;
			}
			
		</style>
	</head>
	<body>
		<form class="layui-form" id="saveSysUserForm">
			<div class="layui-form-item">
				<label class="layui-form-label"><font color="red" size="3">*</font>用户姓名：</label>
				<div class="layui-input-block">
					<input type="text" name="username" required lay-verify="required|username" placeholder="1-10个字符，且不能出现空格" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
                <label class="layui-form-label"><font color="red" size="3">*</font>登录账号：</label>
                <div class="layui-input-block">
                    <input type="text" name="account" required lay-verify="required|account" placeholder="1-20个字符，且不能出现空格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red" size="3">*</font>登录密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required|password" placeholder="密码6到12位，且不能出现空格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red" size="3">*</font>确认密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="confirmPassword" required lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
			    <label class="layui-form-label">邮箱：</label>
			    <div class="layui-input-block">
			     <input type="text" name="email" required lay-verify="email" placeholder="输入正确的邮箱格式" autocomplete="off" class="layui-input" />
			    </div>
			</div>
			<div class="layui-form-item">
                <label class="layui-form-label">手机：</label>
                <div class="layui-input-block">
                 <input type="text" name="phone" required lay-verify="phone" placeholder="输入正确的手机号码格式" autocomplete="off" class="layui-input" />
                </div>
            </div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo" type="button">立即提交</button>
				</div>
			</div>
		</form>
		
		<script>
			layui.use(['form', 'layedit', 'laydate'], function(){
				var form = layui.form,layer = layui.layer;
				
			    // 邮箱正则表达式
	            var reg_email=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
	            // 电话正则
	            var reg_phone= /^((0\d{2,3}-\d{7,8})|(1[1-9]\d{9}))$/;
				form.verify({
					username: [/^[\S]{1,10}$/,'1-10个字符，且不能出现空格'],
		            account: [/^[\S]{1,20}$/,'1-20个字符，且不能出现空格'],
		            password: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],
		            confirmPassword: function(value) {
		            	var password = $("input[name='password']").val();
		            	if (value != password) {
		            		return "两次密码输入不一致";
		            	}
		            },
					email: function(value) {
		                if(value.length > 0 && !reg_email.test(value)) {
		                    return "邮箱格式不正确";
		                }
		            },
		            phone: function(value) {
		                if(value.length > 0 && !reg_phone.test(value)) {
		                    return "手机格式不正确";
		                }
		            }
                });
			
				//监听提交
				form.on('submit(formDemo)', function(data){
					$.ajax({
	                    url : "/sys/sysUser/saveSysUser",
	                    type : "post",
	                    data : $("#saveSysUserForm").serializeArray(),
	                    success : function(result) {
	                        if (result.state) {
	                            layer.msg('保存成功！', {icon: 1,time: 1000}, function(){
									// 1.先得到当前iframe层的索引
									var index = parent.layer.getFrameIndex(window.name); 
									// 2.再执行关闭 
									parent.layer.close(index); 
									// 调用父页面的方法
									window.parent.updateData();
	                            });
	                        } else {
	                            layer.msg(""+result.msg, {icon: 5});
	                        }
	                    }
	                });
				});
			});
		</script>
	</body>
</html>
